<template>
	<view class="detailContent" >
		<view class="TitleFixed" :style='getTitleTop' v-if="titleTop">
            <img src="https://cdn.yueyangshuyuan.com/detailBack.png" @tap="goBack" />
			<text>项目详情</text>
        </view>
	    <view class="header">
            <view class="headerImg">
				<img :src="banner" class="detailImg" />
				<img src="https://cdn.yueyangshuyuan.com/xiangmumengc.png" class="xiangmumengc" />
				<view class="backImg" :style="{'position': 'absolute','top':titleBarHeight}" @tap="goBack">
					<img src="https://cdn.yueyangshuyuan.com/detailBack.png" />
				</view>
				<view class="topFontCeng" @tap.stop="lookBigImg">
                    <view class="bigFont">{{name}}</view>
					<img src="https://cdn.yueyangshuyuan.com/xian.png" class="xian"/>
					<view class="local clearfix">
						<p class="p clearfix" @tap.stop="lookMap">
							<img src="https://cdn.yueyangshuyuan.com/di.png" class="di" />
							<span>{{workPlace}}</span>
							<img src="https://cdn.yueyangshuyuan.com/dizhi.png" class="dizhi" />
						</p>
					</view>
					<view class="imgBottom clearfix" >
						<span>{{number}}</span>
                         <img src="https://cdn.yueyangshuyuan.com/tu.png" class="tu" />
						 
					</view>
				</view>
            </view>
            <view class="headerDetail">
				<img src="https://cdn.yueyangshuyuan.com/jingxuan.png" class="bg" />
				<view class="p clearfix">
					<p class="fontP clearfix">
						<span class="dian">.</span>
						<span class="font">精选商品</span>
						<span class="dian">.</span>
					</p>
				</view>
				<view class="shopList clearfix">
					<view class="list" v-for='(item,index) in list' :key="index" @tap="goDetail(item)">
						<img :src="item.merchPic[0].fileUrl" />
						<view class="navList">
							<p class="title">{{item.title}}</p>
							<p class="font">{{item.subtitle}}</p>
							<view class="priceAll">
								<span class="fontSmail red">￥</span>
								<span class="fontBig red">{{item.price}}</span>
								<span class="fontSmail">元/起</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<p class="bu"></p>
			<view class="projectDetail">
				<view class="title">项目详情</view>
				<p>{{detail}}</p>
			</view>
        </view>
		<Tabbar :tabSelect=0></Tabbar>
	</view>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
import Tabbar from '../../components/tabber.vue';
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				name:"",
				toView:'',
				isFixed:false,
				merchId:9,
				titleBarHeight:"24px",
				listSwiper:[],
				list:[],
				latitude:31.193987,
				longitude:121.31891000000002,
				workPlace:"虹桥火车站(地铁站)",
				projectId:"",
				projectDataList:{},
				number:"",
				banner:"",
				detail:"",
				othersPic:"",
				pageNo:0,
				pageSize:1000,
				res:this.phoneData,
				merchPic:"",
				titleTop:false,
				isPlat:-1,
			}
		},
		watch: {
			
		},
		onLoad(option){
			this.projectId=option.projectId;
		},
		created(){
			this.getPhoneType();
		},
		
		mounted(){
			var  that = this;
			this.$api.projectList({
			},this.projectId).then(json=>{
				if(json){
					 this.name=json.name;
					 this.workPlace=json.geoLocation.address;
					 this.latitude=json.geoLocation.latitude;
					 this.longitude=json.geoLocation.longitude;
					 this.number=json.othersPic.length;
					 this.othersPic=json.othersPic;
					 this.banner=json.homePic.fileUrl;
					 this.detail=json.detail;
					 
				}
			})
			
			//merchPage
			this.$api.merchPage({
				projectId:this.projectId,
				pageNo:this.pageNo,
				pageSize:this.pageSize
			}).then(json=>{
				if(json){
					 this.list=json.list;
				}
			})
			
		},	
		onShow() {
			this.getPhoneType();
			this.init();
			
		},
		computed:{
			...mapState(['phoneData']),
			getTitleTop(){
				if(this.isPlat == 3){
					return 'padding-top:54px';
				}else if(this.isPlat == 2){
					return 'padding-top:32px';
				}else if(this.isPlat == 1){
					return 'padding-top:35px';
				}
			}
		} ,
		//页面滚动执行方式
		onPageScroll(e) {
			this.titleTop = e.scrollTop > 40 ? true : false;
		},
		methods: {
			...mapMutations(['getPhoneType']),
			init(){
				if (this.phoneData.model.indexOf('iPhone') !== -1) {
					this.titleBarHeight=this.phoneData.statusBarHeight+5+"px";
					if(this.phoneData.screenHeight >= 812){//x
						this.isPlat = 3;
					}else{
						this.isPlat = 2;
					}
				} else {
					this.titleBarHeight=this.phoneData.statusBarHeight+7+"px";
					this.isPlat = 1;
				}
			},
			goDetail(item){
                uni.navigateTo({
					url: '/pages/detail/detail?merchId='+item.id
				});
			},
			//点击返回
			goBack(){
				uni.navigateBack({
				  delta: 1
				})
			},
			//点击预览大图
			lookBigImg(){
			
				//previewImage
				let _this=this;
				let imgArray=_this.othersPic.map(item=>item.fileUrl);
				
                uni.previewImage({
				  current: imgArray[0] , // 当前显示图片的http链接
				  urls: imgArray // 需要预览的图片http链接列表
				})
			},
			//点击查看地图
			lookMap(){
				// console.log("点击查看地图");
				if (this.latitude != -1 && this.longitude !=-1){
					uni.openLocation({
					  latitude:this.latitude,
					  longitude:this.longitude,
					  address: this.workPlace,
					  name: "[位置]"
					})
				  }
			},
		},
		onReady() {
           this.init();
		},
	}
</script>

<style  lang="scss">
	.fl {
		float: left;
		display: inline;
	}
	.fr {
		float: right;
		display: inline;
	}
	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		clear: both;
		zoom: 1;
    }
	.TitleFixed{
		position: fixed;
		top: 0;
		left: 0;
		color: #262626;
		background: #fff;
		width:100%;
		z-index:1000;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding-bottom: 14px;
    	border-bottom: 1px solid #ddd;
		img {
			width:64upx;
			height:64upx;
			position: absolute;
			left: 12px;
		}
	}
    .detailContent {
		// padding-bottom:108upx;
		// box-sizing: border-box;
        .header {
            .headerImg {
				position: relative;
				width:750upx;
				height:548upx;
                .detailImg {
                    display: block;
					width:750upx;
					height:548upx;
				    
                }
				.xiangmumengc {
					width:750upx;
					height:548upx;
				    position: absolute;
					top:0;
					left:0;
					z-index:4;
				}
				.backImg {
					position: absolute;
					left:22upx;
					z-index:99;
					img {
						width:64upx;
						height:64upx;
					}
				}
				.topFontCeng {
					width:750upx;
					height:548upx;
					background: none;
				    position: absolute;
					top:0;
					left:0;
					z-index:9;
					.bigFont{
						margin-top:200upx;
						font-size: 52upx;
						color: #FFFFFF;
						letter-spacing: 0;
						text-align: center;
						font-weight: bold;
					}
					.xian {
						display: block;
						width:320upx;
						height:12upx;
                        margin:30upx 215upx;
					}
					.local {
						position: relative;
						.p{
							float: left;
							height:35upx;
							line-height: 35upx;
							width: 100%;
							text-align: center;
							display: flex;
							justify-content: center;
							// position: absolute;
							// left:50%;
							// -webkit-transform:translate(-50%,0);
			                // transform:translate(-50%,0);
						    // margin:0 238upx;
							.di {
								float: left;
								width:21upx;
								height:24upx;
								margin-top:6upx;
								margin-right:10upx;
							}
							span {
								float: left;
								font-size: 26upx;
								color: #FFFFFF;
								max-width:600upx;
								overflow:hidden;
								white-space:nowrap;
								text-overflow:ellipsis;
							}
							.dizhi {
								float: left;
								width:10upx;
								height:18upx;
								margin-top:10upx;
								margin-left:10upx;
							}
						}
					}
					.imgBottom {
						width:100%;
						height:32upx;
						margin-top:65upx;
						img {
						   float: right;
                           display: block;
						   width:23upx;
						   height:20upx;
						   margin-top:6upx;
						}
						span {
							float: right;
							font-size: 24upx;
							color: #FFFFFF;
							line-height:32upx;
							margin-left:10upx;
							margin-right:30upx;
						}
					}
				}
            }
        }
    }
	.headerDetail {
		width:100%;
		padding:40upx 24upx 0 24upx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 28upx 28upx 0 0;
		-webkit-border-radius: 28upx 28upx 0 0;
		position: relative;
		top:-50upx;
		left:0;
		z-index:9;
		.bg {
			display: block;
			width:239upx;
			height:66upx;
			position: absolute;
			top:0;
			left:50%;
			margin-left:-120upx;
			
		}
		.p {
			text-align: center;
			font-size: 40upx;
			color: #262626;
			font-weight:700;
			.dian {
				float: left;
				margin-right:20upx;
				line-height: 30upx;
			}
			.font {
				float: left;
				margin-right:20upx;
			}
			.fontP {
				float: left;
				margin:0 220upx;
			}
		}
		.shopList {
			width:100%;
			// padding:0 0 ;
			box-sizing: border-box;
			.list {
				float: left;
				width:340upx;
				border-radius:8upx;
				margin-right:22upx;
				box-sizing: border-box;
				margin-top:30upx;
				img {
					display: block;
					width:340upx;
					height:248upx;
					border-radius: 8px 8px 0px 0px;
				}
				.navList {
					border: 1upx solid #E4E4EF;
					border-top:none;
					border-radius:0 0 8upx 8upx;
					padding:20upx 15upx;
					box-sizing: border-box;
					.title {
						font-size: 30upx;
						color: #262626;
						letter-spacing: 0;
						line-height: 38upx;
						margin-bottom: 20upx;
						text-overflow:ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp:2;
						overflow: hidden;
						height:80upx;
						word-break: break-all;
					}
					.font {
						font-size: 20upx;
						color: #777777;
						letter-spacing: 0;
						line-height: 28upx;
						margin-bottom: 20upx;
						text-overflow:ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp:2;
						overflow: hidden;
						height:56upx;
					}
					.priceAll {
						.fontSmail {
							font-size: 22upx;
							color: #777777;
							
						}
						.red {
							color: #E25422;
						}
						.fontBig {
							margin-right:10upx;
							margin-left:5upx;
							font-size: 36upx;
						}
					}
				}
			}
			.list:nth-child(2n){
				margin-right:0upx;
			}
		}
		
	}
	.bu {
		width:100%;
		height:20upx;
		background: #F7F7FD;
	}
	.projectDetail {
		padding:40upx 24upx;
		box-sizing: border-box;
		padding-bottom:160upx;
		.title {
			font-size: 40upx;
			color: #262626;
			margin-bottom:20upx;
			font-weight:700;
		}
		p {
			font-size: 30upx;
			color: #777777;
			letter-spacing: 0;
			line-height: 48upx;
		}
	}
</style>
